<template>
	<u-input placeholder="请输入电话号码" border="none" v-model="phone" @change='changeInput'>
		<view class="relative" slot="prefix" style="width: 120rpx">
			<view class="flex"   @click.stop="$emit('setShowArea',{flag:true,area:area})">
					<view class="fontS32" >
						+{{area}} 
					</view>
					<u-icon name="arrow-down" size="18rpx" color="#333" style='margin-left: 10rpx;'></u-icon>
			</view>
			<view class="selectbox" v-if="showArea">
				<view class="triangle">
				</view>
				<view class="box">
					<scroll-view scroll-y="true" style="min-height: 10vh;max-height: 30vh;">
						<view v-for="(item,index) in listArea" :key="index" class="lis   fontS24 elipes1"
							@click="area=item.prefix;$emit('setShowArea',{flag:false,area:area})">
							+{{item.prefix}}
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		
	</u-input>
</template>

<script>
	export default{
		props:{
			showArea:{
				default:true
			}
		},
		data(){
			return{
				area:uni.getStorageSync('userInfo').phone_prefix,
				phone:'',
				listArea:[],
			}
		},
		methods:{
			changeInput(val){
				this.$emit('setnewPhone',val)
			},
			setshow(item){
				this.area=item.prefix
				this.$emit('setShowArea',{flag:true,area:this.area})
			},
		},
		mounted() {
			this.$my.post('/index/com/get_phone_prefix').then(res=>{
				if(res.code==200){
					this.listArea=res.data 
				}
			})
		}
	}
</script>

<style lang="scss" scoped>
	.selectbox {
		position: relative;
		width: 150rpx;
		z-index: 999;
	
		.lis {
			position: relative;
			z-index: 99;
			display: flex;
			justify-content: center;
			height: 88rpx;
			line-height: 88rpx;
			border-bottom: 1px solid rgba(129, 129, 129, 0.1216);
		}
	
		.triangle {
			width: 36rpx;
			height: 36rpx;
			background-color: #fff;
			left: 50%;
			transform: translateX(-50%) rotate(50deg);
			text-align: center;
			position: absolute;
			top: 20rpx;
			z-index: 99;
		}
	
		.box {
			padding: 0 24rpx;
			box-sizing: border-box;
			position: absolute;
			width: 100%;
			min-height: 10vh;
			max-height: 40vh;
			background-color: #fff;
			box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1000);
			top: 35rpx;
			left: 0;
		}
	}
</style>